<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>数据概况</el-breadcrumb-item>
                    <el-breadcrumb-item>短信验证码列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
              <template #header>

                <div style="display: flex; align-items: center;">
                  <el-input style="width: 260px;" v-model="inputval" placeholder="请输入手机" />
                  <div style="padding: 5px;"></div>
                  <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>

                  <div style="padding: 5px;"></div>
                  <el-button type="primary"  @click="setCode()">生成验证码</el-button>
                  <div style="padding: 5px;"></div>
                  <div>临时验证码：{{smsData.code}}，有效时间：{{smsData.over_time}}</div>

                </div>
              </template>
                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" />
                    <el-table-column prop="platform" label="平台" width="100" />
                    <el-table-column prop="mobile" label="手机号" />
                    <el-table-column prop="code" label="验证码" />
					<el-table-column prop="create_time" label="发送时间" />
                    <el-table-column label="状态">
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.is_use == 1">已使用</el-tag>
                            <el-tag type="warning" v-else>未使用</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>


</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, Coin, Setting, UserFilled, Search } from '@element-plus/icons-vue'

const submitLock = ref(false)
const agentDialog = ref(false)
const passsDialog = ref(false)
const moneyDialog = ref(false)
const usersDialog = ref(false)
const tableData = reactive({ list: [] })
const inputval = ref('')

function inputSearch() {
  if (inputval.value == '') {
    return error('请输入UID或用户名')
  }
  page.mobile = inputval.value
  admin_users_index()
}

function setCode() {
  request_post('/admin_create_sms_temporary', {}).then((res) => {
    if (res.data.code == 200) {
      smsData.code = res.data.data.code
      smsData.over_time = res.data.data.over_time
      success('验证码生成成功')
    } else {
      return error(res.data.msg)
    }
  })
}
const page = reactive({
  mobile: null,
    pagenum: 1,
    pagesize: 18,
    total: 0
})

onMounted(() => {
    admin_users_index()
  get_sms_temporary()

})

const smsData = reactive({
  code: "" ,
  over_time: ""
})
function get_sms_temporary() {

  request_post('/admin_get_sms_temporary').then((res) => {
    if (res.data.code == 200) {
      smsData.code = res.data.data.code
      smsData.over_time = res.data.data.over_time
      console.log(smsData);
    } else {
      return error(res.data.msg)
    }
  })

}

function handleSizeChange(val) {
    page.pagenum = val
    admin_users_index()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_users_index()
}
// 获取用户列表
function admin_users_index() {

    request_post('/admin_users_sms', page).then((res) => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}

</script>

<style></style>
